<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="/roles/list">角色列表</Breadcrumb-item>
      <Breadcrumb-item>{{ id ? '编辑' : '新增' }}角色</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formRole" :model="formRole" :rules="ruleValidate" :label-width="100">
        <Form-item label="ID标识" prop="id">
          <Row>
            <Col span="12">
              <Input v-model="formRole.id" v-if="id" readonly />
              <Input v-model="formRole.id" v-else placeholder="请输入角色ID标识" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="名称" prop="name">
          <Row>
            <Col span="12">
              <Input v-model="formRole.name" placeholder="请输入名称" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="备注" prop="memo">
          <Row>
            <Col span="12">
              <Input v-model="formRole.memo" type="textarea" :rows=3 placeholder="请输入备注" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="primary" @click="handleSave" class="margin-right-sm">保存</Button>
          <Button type="ghost" @click="$router.back()">返回</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'RoleForm',
    components: {
    },
    created () {
      this.id = this.$route.params.id
      this.id && this.get(this.id)
    },
    data () {
      return {
        id: '',
        formRole: {
          id: '',
          name: '',
          memo: ''
        },
        ruleValidate: {
          id: [
            {
              required: true,
              message: 'ID不能为空'
            },
            {
              max: 100,
              message: 'ID不能多于 100 个字'
            }
          ],
          name: [
            {
              required: true,
              message: '名称不能为空'
            },
            {
              max: 100,
              message: '名称不能多于 100 个字'
            }
          ],
          memo: [
            {
              max: 200,
              message: '内容长度过长'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['roles'])
    },
    watch: {
      'roles.role': {
        handler (newVal) {
          this.$set(this, 'formRole', newVal)
        }
      }
    },
    methods: {
      get (id) {
        this.$store.dispatch('getRole', {id})
      },
      handleSave () {
        this.$refs.formRole.validate((valid) => {
          if (valid) {
            const action = this.id ? 'putRole' : 'postRole'

            this.$store.dispatch(action, this.formRole).then(() => {
              this.$Message.success((this.id ? '编辑' : '新增') + '成功！')
              !this.id && this.resetFields()

              if (!this.id) {
                this.$router.back()
              }
            })
          }
        })
      },
      resetFields () {
        this.$refs.formRole.resetFields()
      }
    }
  }
</script>
